<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit" />

<title>feiynn | react-native-props-all</title>
<link href="/open/themes/inspinia/css/bootstrap.min.css" rel="stylesheet">
<link href="/open/themes/inspinia/font-awesome/css/font-awesome.css" rel="stylesheet">

<!-- Data Tables -->
<link href="/open/themes/inspinia/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<link href="/open/themes/inspinia/css/plugins/dataTables/dataTables.responsive.css" rel="stylesheet">
<link href="/open/themes/inspinia/css/plugins/dataTables/dataTables.tableTools.min.css" rel="stylesheet">
<link href="/open/themes/inspinia/css/animate.css" rel="stylesheet">
<link href="/open/themes/inspinia/css/style.css" rel="stylesheet">

<link href="/open/themes/feiynn/css/cnFont.css" rel="stylesheet">
<!-- Toastr style -->
<link href="/open/themes/feiynn/toastr/toastr.min.css" rel="stylesheet">

</head>


<body class="top-navigation">

	<div id="page-wrapper" class="white-bg">

		<div class="col-md-12">

			<div class="row">
				<div class="col-md-12">
					<form id="myForm">
						<table class="table table-striped table-bordered table-hover" id="myTable">
							<thead>
								<tr>
									<th><input id="chkAll" type="checkbox"></th>
									<th>name</th>
									<th>value</th>
									<th>desc</th>
									<th>create_time</th>
									<th>last_check_time</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</form>
					<p>
						<button class="btn btn-primary" type="button" id="createModalBtn">add</button>
						<button class="btn btn-primary" type="button" id="updateModalBtn">update</button>
						<button class="btn btn-primary" type="button" id="deleteModalBtn">delete</button>
					</p>
				</div>
			</div>

			<div class="modal fade" id="saveOrUpdateModal" tabindex="-1" role="dialog" aria-labelledby="saveOrUpdateModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-lg">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="saveOrUpdateModalLabel">添加新的记录</h4>
						</div>
						<div class="modal-body">
							<form id="saveOrUpdateModalForm" class="form-horizontal">
								<input type="hidden" name="id" id="id">
								<div class="form-group">
									<div class="row">
										<label class="col-sm-2 control-label"> name <span class="red_star">*</span>
										</label>
										<div class="col-sm-4">
											<input type="text" id="name" name="name" class="form-control" placeholder="">
										</div>
										<label class="col-sm-2 control-label"> value <span class="red_star">*</span>
										</label>
										<div class="col-sm-4">
											<input type="text" id="value" name="value" class="form-control" placeholder="">
										</div>
									</div>
								</div>
								<div class="form-group">
									<div class="row">
										<label class="col-sm-2 control-label"> desc <span class="red_star">*</span>
										</label>
										<div class="col-sm-4">
											<input type="text" id="desc" name="desc" class="form-control" placeholder="">
										</div>
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" id="saveOrUpdateModalBtn" class="btn btn-primary" data-loading-text="执行中...">确定</button>
							<button type="button" id="saveOrUpdateModalCloseBtn" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
				</div>
			</div>

			<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="deleteModalLabel">确定吗?</h4>
						</div>
						<div class="modal-body">
							<form id="deleteModalForm" class="form-horizontal">
								<div class="form-group">
									<div class="row">
										<div class="col-md-12">这将删除所选记录</div>
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" id="deleteModalConfirmBtn" class="btn btn-primary" data-loading-text="执行中...">确定</button>
							<button type="button" id="deleteModalCloseBtn" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>


	<!-- Mainly scripts -->
	<script type="text/javascript" src="/open/themes/inspinia/js/jquery-2.1.1.js"></script>
	<script type="text/javascript" src="/open/themes/inspinia/js/bootstrap.js"></script>
	<script type="text/javascript" src="/open/themes/inspinia/js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script type="text/javascript" src="/open/themes/inspinia/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

	<!-- Custom and plugin javascript -->
	<script type="text/javascript" src="/open/themes/inspinia/js/inspinia.js"></script>
	<script type="text/javascript" src="/open/themes/inspinia/js/plugins/pace/pace.min.js"></script>
	<script type="text/javascript" src="/open/themes/feiynn/js/feiynn.js"></script>

	<!-- Toastr script -->
	<script src="/open/themes/feiynn/toastr/toastr.min.js"></script>
	<script src="/open/themes/feiynn/js/jquery.cookie.js"></script>

	<!-- Data Tables -->
	<script src="/open/themes/feiynn/DataTables-1.10.6/media/js/jquery.dataTables.js"></script>
	<script src="/open/themes/inspinia/js/plugins/dataTables/dataTables.bootstrap.js"></script>
	<script src="/open/themes/inspinia/js/plugins/dataTables/dataTables.responsive.js"></script>
	<script src="/open/themes/inspinia/js/plugins/dataTables/dataTables.tableTools.min.js"></script>
	<script src="/open/themes/feiynn/My97DatePicker/WdatePicker.js"></script>

	<script type="text/javascript" src="/open/themes/feiynn/mustache.js-master/mustache.js"></script>

	<!-- the tmpl script,Start -->
	<script type="text/javascript" src="/open/themes/feiynn/jquery-validation-1.13.1/dist/jquery.validate.js"></script>
	<!-- the tmpl script,End -->

	<script type="text/javascript">
		var myTableRef;
		var isValidate;
		var pageLength = 10;
		var urlPrefix = '/reactNative/props';
		var crud_list_paging_url = urlPrefix + '/list';
		var crud_list_all_url = urlPrefix + '/listAll';
		var crud_saveOrUpdate_url = urlPrefix + '/saveOrUpdate';
		var crud_delete_url = urlPrefix + '/delete';

		function configToastr() {
			toastr.options = {
				"closeButton" : true,
				"debug" : false,
				"progressBar" : true,
				"positionClass" : "toast-top-center",
				"onclick" : null,
				"showDuration" : "400",
				"hideDuration" : "1000",
				"timeOut" : "7000",
				"extendedTimeOut" : "1000",
				"showEasing" : "swing",
				"hideEasing" : "linear",
				"showMethod" : "fadeIn",
				"hideMethod" : "fadeOut"
			};
		}

		$(function() {

			$('#createModalBtn').on('click', function() {
				$('#id').val('');
				$('form#saveOrUpdateModalForm')[0].reset();
				$('#saveOrUpdateModal').modal({
					'backdrop' : 'static'
				});
				//将模态框的标题修改为修改当前记录
				$("#saveOrUpdateModalLabel").text("添加新的记录");
			});

			$('#updateModalBtn').on('click', function() {

				var myCheckbox = $('input[name=myIds]:checked');

				if (myCheckbox.length != 1) {
					toastrInfo('请选择一条记录执行编辑操作');
					return;
				}

				var myTr = $(myCheckbox[0]).parents('tr')[0];
				var myData = myTableRef.row(myTr).data();

				$('#id').val(myData.id);

				$('#saveOrUpdateModal').modal({
					'backdrop' : 'static'
				});

				//将模态框的标题修改为修改当前记录
				$("#saveOrUpdateModalLabel").text("编辑当前记录");

				//CONFIG VALUE HERE
				$('#value').val(myData.value);
				$('#name').val(myData.name);
				$('#desc').val(myData.desc);
			});

			$('#deleteModalBtn').on('click', function() {
				if ($('input[name=myIds]:checked').length == 0) {
					toastrInfo('至少选择一条记录来执行删除操作');
					return;
				}
				$('#deleteModal').modal({
					'backdrop' : 'static'
				});
			});

			$("#chkAll").on("click", function() {
				$("input:checkbox").prop("checked", $(this).prop('checked'));
			});

			$('#saveOrUpdateModalBtn').on("click", function() {
				if (isValidate.form() == false) {
					return;
				}
				$('#saveOrUpdateModalBtn').button('loading');
				$.ajax({
					type : "POST",
					url : crud_saveOrUpdate_url,
					data : $("#saveOrUpdateModalForm").serialize(),
					cache : false,
					dataType : "json",
					timeout : 5000,
					success : function(r) {
						$('#saveOrUpdateModalBtn').button('reset');
						$('#saveOrUpdateModalCloseBtn').click();
						if (r.ret == 0) {
							myTableRef.ajax.reload();
							toastrSuccess("操作成功");
						} else {
							ajaxError();
						}
					},
					error : function(jqXHR, textStatus, errorThrown) {
						$('#saveOrUpdateModalBtn').button('reset');
					}
				});
			});
			$("#mySearchFormResetBtn").on('click', function() {
				$("#mySearchForm")[0].reset();
			});
			isValidate = $("form#saveOrUpdateModalForm").validate({
				rules : {
					nonExistField : {
						required : true
					},
					name : {
						required : true
					},
					value : {
						required : false
					},
					desc : {
						required : false,
						maxlength : 100
					}
				},
				messages : {
					nonExistField : {
						required : "nonExistMessage"
					}
				}
			});

			$('#deleteModalConfirmBtn').on("click", function() {
				$(this).button('操作进行中...');
				$.ajax({
					type : "POST",
					url : crud_delete_url,
					data : $("#myForm").serialize(),
					cache : false,
					dataType : "json",
					timeout : 5000,
					success : function(r) {
						$('#deleteModalBtn').button('reset');
						$('#deleteModalCloseBtn').click();
						if (r.ret == 0) {
							myTableRef.ajax.reload();
							toastrSuccess("成功删除记录");
						} else {
							ajaxError();
						}
					},
					error : function(jqXHR, textStatus, errorThrown) {
						$('#deleteModalBtn').button('reset');
						$('#deleteModalCloseBtn').click();
						toastrError(r.msg);
					}
				});
			});

			$("#saveOrUpdateModalCloseBtn").on('click', function() {
				$("label.error").hide();
				$(".error").removeClass("error");
			});

			myTableRef = $('#myTable')
					.DataTable(
							{
								"pageLength" : 15,
								"autoWidth" : false,
								"processing" : true,
								"serverSide" : false,
								"deferRender" : true,
								"paging" : true,
								"filter" : true,
								"lengthChange" : true,
								"ordering" : true,
								"orderClasses" : true,
								"pagingType" : "full_numbers",
								"info" : true,
								"ajax" : {
									"url" : crud_list_all_url,
									"type" : "POST",
									"dataType" : 'json',
									"data" : function(d) {
										$('input#start').val(d.start);
										$('input#length').val(d.length);
										return $('#mySearchForm').serialize();
									}
								},
								"initComplete" : function() {
								},
								"columns" : [
										{
											"mData" : function(source, type,
													val) {
												return '<input id="myIds" name="myIds" value="'+source.id+'" type="checkbox">';
											}
										}, {
											"data" : "name"
										}, {
											"data" : "value"
										}, {
											"data" : "desc"
										}, {
											"data" : "create_time"
										}, {
											"data" : "last_check_time"
										} ],
								"columnDefs" : [ {
									"orderable" : false,
									"targets" : 0
								} ]
							});
			//end datatable
			$('#mySearchFormBtn').on('click', function() {
				myTableRef.ajax.reload();
			});
		});
	</script>
</body>
</html>